<template>
  <view class="container">
    <!-- 订单状态 -->
    <view class="status-box bg-primary">
      <text class="status-text">待发货</text>
      <text class="status-tip">商家正在准备商品</text>
    </view>

    <!-- 收货信息 -->
    <view class="card">
      <view class="flex align-center">
        <text class="iconfont icon-location fs-40 color-primary"></text>
        <view class="ml-20">
          <view class="flex align-center">
            <text class="fs-32">张三</text>
            <text class="ml-30 fs-28 color-grey">138****8888</text>
          </view>
          <text class="fs-28 color-dark mt-10">北京市海淀区中关村大街1号</text>
        </view>
      </view>
    </view>

    <!-- 商品信息 -->
    <view class="card">
      <view
        class="goods-item flex"
        v-for="item in 2"
        :key="item"
      >
        <image
          src="/static/goods-demo.jpg"
          class="goods-img"
          mode="aspectFill"
        ></image>
        <view class="goods-info">
          <text class="goods-title">商品标题商品标题商品标题商品标题商品标题</text>
          <text class="goods-spec color-grey mt-10">规格：标准款</text>
          <view class="flex justify-between align-center mt-20">
            <text class="price">¥299.00</text>
            <text class="color-grey">x1</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="card">
      <info-item
        label="订单编号"
        value="20230808123456789"
      />
      <info-item
        label="下单时间"
        value="2023-08-08 12:30:45"
      />
      <info-item
        label="支付方式"
        value="微信支付"
      />
      <info-item
        label="配送方式"
        value="快递配送"
      />
    </view>

    <!-- 价格明细 -->
    <view class="card">
      <info-item
        label="商品金额"
        value="¥598.00"
      />
      <info-item
        label="运费"
        value="+¥0.00"
      />
      <info-item
        label="优惠券"
        value="-¥50.00"
      />
      <view class="price-total flex justify-between">
        <text>实付金额</text>
        <text class="price-lg">¥548.00</text>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="footer">
      <button class="btn secondary">联系客服</button>
      <button class="btn primary ml-20">查看详情</button>
    </view>
  </view>
</template>

<script>
export default {
  components: {
    'info-item': {
      props: ['label', 'value'],
      template: `
        <view class="info-item flex justify-between">
          <text class="color-grey">{{label}}</text>
          <text>{{value}}</text>
        </view>
      `,
    },
  },
}
</script>
<style>
page {
  height: 100%;
  background: #000000;
  color: white;
}
</style>
<style scoped lang="less">
.container {
  background-color: #000000;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.status-box {
  padding: 40rpx 30rpx;
  color: white;
  .status-text {
    font-size: 40rpx;
    font-weight: bold;
  }
  .status-tip {
    display: block;
    margin-top: 20rpx;
    font-size: 28rpx;
  }
}

.card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16rpx;
  margin: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.goods-item {
  padding: 20rpx 0;
  & + .goods-item {
    border-top: 2rpx solid #eee;
  }
  .goods-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
  }
  .goods-info {
    flex: 1;
    margin-left: 24rpx;
  }
  .goods-title {
    font-size: 28rpx;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
}

.price {
  color: #e64340;
  font-size: 32rpx;
  font-weight: bold;
}

.price-lg {
  color: #e64340;
  font-size: 40rpx;
  font-weight: bold;
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx;
  display: flex;
  justify-content: flex-end;
  border-top: 2rpx solid #eee;

  .btn {
    height: 72rpx;
    line-height: 72rpx;
    padding: 0 40rpx;
    border-radius: 36rpx;
    font-size: 28rpx;

    &.secondary {
      background: #f5f5f5;
      color: #666;
    }

    &.primary {
      background: #e64340;
      color: white;
    }
  }
}

// 辅助样式
.mt-10 {
  margin-top: 10rpx;
}
.ml-20 {
  margin-left: 20rpx;
}
.ml-30 {
  margin-left: 30rpx;
}
.fs-28 {
  font-size: 28rpx;
}
.fs-32 {
  font-size: 32rpx;
}
.fs-40 {
  font-size: 40rpx;
}
.color-primary {
  color: #07c160;
}
.color-grey {
  color: #999;
}
.color-dark {
  color: rgba(255,255,255,1);
}
.bg-primary {
  background: #07c160;
}
.flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
</style>